import Head from 'next/head';
import Link from 'next/link';
import { Row, Col, Card, Typography } from 'antd';
import { 
  CompressOutlined, 
  ScissorOutlined, 
  SwapOutlined,
  BgColorsOutlined,
  FileSearchOutlined,
  EditOutlined
} from '@ant-design/icons';
import MainLayout from '../../components/layout/MainLayout';

const { Title, Paragraph } = Typography;

export default function ImageTools() {
  const imageTools = [
    {
      title: '图片压缩',
      description: '压缩图片以减小文件大小，保持合理的图像质量',
      icon: <CompressOutlined />,
      path: '/image-tools/compress'
    },
    {
      title: '图片裁剪',
      description: '自由裁剪图片或按特定比例裁剪图片',
      icon: <ScissorOutlined />,
      path: '/image-tools/crop'
    },
    {
      title: '图片格式转换',
      description: '在JPG、PNG、WEBP等格式之间转换图片',
      icon: <SwapOutlined />,
      path: '/image-tools/convert'
    },
    {
      title: '图片水印处理',
      description: '为图片添加水印或移除现有水印',
      icon: <BgColorsOutlined />,
      path: '/image-tools/watermark'
    },
    {
      title: 'OCR文字识别',
      description: '从图片中提取文字内容',
      icon: <FileSearchOutlined />,
      path: '/image-tools/ocr'
    },
    {
      title: '图像文字替换',
      description: '替换图片中的文字内容',
      icon: <EditOutlined />,
      path: '/image-tools/text-replace'
    }
  ];

  return (
    <MainLayout>
      <Head>
        <title>图片工具 - 在线工具平台</title>
        <meta name="description" content="提供图片压缩、裁剪、格式转换等多种在线图片处理工具，简单高效" />
      </Head>

      <div className="page-header">
        <Title>图片工具</Title>
        <Paragraph>
          多种在线图片处理工具，帮助您快速编辑和转换图片，无需专业软件
        </Paragraph>
      </div>

      <div className="tool-cards">
        <Row gutter={[24, 24]}>
          {imageTools.map((tool, index) => (
            <Col xs={24} sm={12} md={8} key={index}>
              <Link href={tool.path}>
                <Card
                  hoverable
                  className="tool-card"
                  cover={
                    <div className="tool-icon-wrapper">
                      {tool.icon}
                    </div>
                  }
                >
                  <Card.Meta
                    title={tool.title}
                    description={tool.description}
                  />
                </Card>
              </Link>
            </Col>
          ))}
        </Row>
      </div>
    </MainLayout>
  );
} 